<template>
	<view class="expert-bottom-nav">
		<view class="expert-nav-item" v-if="itemIndex == '1'">
				<view class="expert-nav-icon">
					<image src="../static/images/fans2.png"></image>
				</view>
				<view class="expert-nav-label-active">粉丝</view>
		</view>
		<view @tap="tapItem" data-index="1" class="expert-nav-item" v-else>
				<view class="expert-nav-icon">
					<image src="../static/images/fans1.png"></image>
				</view>
				<view class="expert-nav-label">粉丝</view>
		</view>
		<view class="expert-nav-item" v-if="itemIndex == '2'">
				<view class="expert-nav-icon">
					<image src="../static/images/my_a.png"></image>
				</view>
				<view class="expert-nav-label-active">我的</view>
		</view>
		<view @tap="tapItem" data-index="2" class="expert-nav-item" v-else>
				<view class="expert-nav-icon">
					<image src="../static/images/my.png"></image>
				</view>
				<view class="expert-nav-label">我的</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['itemIndex'],
		data() {
			return {
				
			}
		},
		
		methods: {
			
			tapItem(e) {
				let index = e.currentTarget.dataset.index
				switch (index) {
					case '1':
						uni.navigateTo({
							url: '/pages/expert_fans/expert_fans'
						})
						break
					case '2':
						uni.navigateTo({
							url: '/pages/expert_my/expert_my'
						})
						break
					default:
						break
				}
			}
			
		}
	}
</script>

<style>
	.expert-bottom-nav {
		width: 750rpx;
		height: 96rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}
	
	.expert-nav-item {
		width: 375rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.expert-nav-icon {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	.expert-nav-icon image {
		width: 48rpx;
		height: 48rpx;
	}
	
	.expert-nav-label {
		color: #333333;
		font-size: 24rpx;
	}
	
	.expert-nav-label-active {
		color: #5683ec;
		font-size: 24rpx;
	}
</style>
